什么是data-属性
// HTML的数据属性，用于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它，来达到操作数据的目的。
{/* <article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article> */}
// var  bigImage = $( "#electriccars" ).data( "parent" ); //注意，这里不用加 data-
有哪些常用的meta标签
{/* <meta charset="UTF-8"> 用来描述文本的编码内容 */}
// http-equiv，顾名思义，相当于http的文件头作用,比如下面的代码就可以设置http的缓存过期⽇期
    // ＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞
{/* <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta> */}
src和href的区别
// src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，
// 在请求src资源时会将其指向的资源 下载并应⽤到⽂档内，如js脚本，img图片和frame等元素
// 当浏览器解析到该元素时，会暂停其他资源的下载和处 理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在底部不是头部。

// href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，
// 当浏览器识别到它他指向的 文件时，就会并行下载资源，不会停止对当前文档的处理。

知道img的srcset的作用是什么
// 可以设计响应式图片，我们可以使⽤两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择 正确的一个资源。
// srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。 
// sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择
{/* <img src="clock-demo-thumb-200.png" alt="Clock" 
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" 
sizes="(min-width: 600px) 200px, 50vw"></img> */}
// 窗口大于600px时图片宽度是200px 其他是50vw
还有哪一个标签能起到跟srcset相似作用
// picture元素通过包含一个或多个<source>元素和一个<img>元素再结合media（媒体查询）来使用
// （下面demo会在屏幕宽度>=1200px时显示source引入的图片，当<1200px时显示img引入的图片)
// img标签必须存在 默认显示source内容
{/* <picture>
    <source srcset="url1.jpg" media="(min-width: 1200px)"/>
    <img src="url2"/>
</picture> */}
script标签中defer和async的区别
// defer：浏览器指示脚本在文档被解析后执行，script被异步加载后并不会立刻执行，而是等待文档被解析完毕后执行。
// async：同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱序的，对于script 有先后依赖关系的情况，并不适用。
// <script>写到body底部 同步执行
有几种前端储存的方式
// cookies、localstorage、sessionstorage、Web SQL、IndexedDB
这些方式的区别是什么
// cookies 优点是兼容性好，请求头自带cookies方便，缺点是大小只有4k 多用于登录等验证 可以设置过期时间如果不设置Expires属性的话就是浏览器关闭自动过期
// localStorage 本地存储，操作方便永久性存储
// sessionStorage 当前页面关闭后就会被清理，是会话级别的存储方式
// Web SQL 被废弃了 但是主流浏览器可以做相关的实现
// indexedDB NoSQL数据库 键值存储操作方便

css基础

CSS选择器的优先级是怎样的
// CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器
link和@import的区别
// link属于XHTML标签，@import是CSS提供的。 
// 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。 
// import只在IE5以上才能识别，link是XHTML标签，没兼容问题。 
// link方式的样式权重高于@import的权重。 
// 使⽤dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是 dom可以控制的。
em\px\rem区别
// px：绝对单位，页面按精确像素展示。
// em:相对单位，基准点为父节点字体的大小，
// rem：相对单位，相对根节点html的字体大小来计算
块级元素水平居中的方法
/* margin: 0 auto; */ //水平居中
// 垂直水平居中
// flex
// position: absolute;top: 50%;left: 50%; /* margin-left: -100px; */ /* margin-top: -100px; */
// position: absolute;top: 50%;left: 50%;   transform: translate(-50%, -50%);
CSS有几种定位方式
// static 正常文档流 块级元素从上到下 行级元素左右排列  top, right, bottom, left 和 z-index 属性无效
// relative：相对定位，此时的『相对』是相对于正常⽂档流的位置。
// absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，
    // 比如一个绝对定位元素它的父级、和祖 父级元素都为relative，它会相对他的父级产生偏移。
// fixed绝对定位 指定元素相对于屏幕视图（viewport）的位置来指定元素位置。滚动时候不会改变
// sticky：粘性定位 效果类型与iOS的通讯录的这个效果
如何理解z-index
// 层级关系 越大离你越近 z-index只能影响设置了position值的元素 relative/absolute/fixed 
// 不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染.
如何理解层叠上下文
// 层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z 轴上延伸，
// HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
// 根元素 (HTML), 
// z-index 值不为 "auto"的 绝对/相对定位，
// ⼀个 z-index 值不为 "auto"的 flex 项⽬ (flex item)，
// 即：⽗元素 display: flex|inline-flex， 
// opacity 属性值⼩于 1 的元素（参考 the specification for opacity）， 
// transform 属性值不为 "none"的元素， 
// mix-blend-mode 属性值不为 "normal"的元素， 
// filter值不为“none”的元素， 
// perspective值不为“none”的元素， 
// isolation 属性被设置为 "isolate"的元素， 
// position: fixed 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇⽂章） 
// -webkit-overflow-scrolling 属性被设置 "touch"的元素
清除浮动有哪些方法
// 空div方法： <div style="clear:both;"></div> 
// Clearfix 方法：.clearfix类
// overflow: auto或overflow: hidden放法，使用BFC
你对css sprites的理解，好处是什么
// 多张图片合成一张精灵图，相应的css，使用时将相应的类添加到元素中
// 只需要一个请求，提前加载资源
// css sprites 不足 维护成本高改动 一张图片背景调整需要改动整张图片，
    // 加速优势在http2中荡然无存，http2多路复用，多张图片可以在一个连接通道搞定
媒体查询
// web平台对多型号尺寸设备进行的一个响应式适配
// 不同的尺寸下显示不同的样式
标准盒模型和怪异盒模型有什么区别
// 标准盒子模型  box-sizing:content-box 
//元素所占的宽度 width+border+padding+margin
// 怪异盒子模型/ie盒子模型 box-sizing:border-box
// 元素所占的宽度 width+margin  width = border+padding+content
谈谈对BFC的理解
// 是一块独立的区域，让处于BFC内部的元素与外部的元素相互隔离
// 1.防止margin发生重叠
// 2.防止与浮动元素区域重叠
// 3.防止元素塌方 计算BFC的高度时，浮动元素也参与计算
为什么有时候人们用translate来改变位置而不是定位
// translate（）是transfrom的一个值 改变transfrom或者opacity不会触发浏览器重新布局（reflow）或重绘（repaint）
// 改变绝对定位会触发重新布局，进而触发重绘和复合。
// translate改变位置时，元素依旧会占据其原始空间，绝对定位不是。
// 改变绝对定位会使用到CPU。因此translate()更高效，可以缩短平滑动画的绘制时间。
伪类和伪元素的区别是什么
// 伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被 呈现到指定的元素时，你可以往元素的选择器后添加上对应的伪类。 
    // 比如 :actvie :first-child
// 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
    // 比如 :before :after
    // 伪元素要配合content属性一起使用
    // 伪元素不会出现在DOM中，所以不能通过js来操作，仅仅是在CSS渲染层加入
你对flex的理解
// web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，
// Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，
// 浏览器负责完成实际布局，当布局涉及到不定宽度，分布对应的场景时，就要优先考虑弹性盒布局
